<template>
  <view class="my-search-container" :style="{ backgroundColor: bgcolor }" @click="gotoSearch()">
    <view class="my-search-box" :style="{ borderRadius: radius + 'px' }">
      <uni-icons type="search" size="17"></uni-icons>
      <text class="placehoder"> 搜索 </text>
    </view>
  </view>
</template>

<script>
export default {
  name: "my-search",
  props: {
    bgcolor: {
      type: String,
      default: "#c00000",
    },
    radius: {
      type: Number,
      default: 15,
    },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    gotoSearch(){
      this.$emit('my-click')
    }
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.my-search-container {
  width: 100%;
  background-color: #c00000;
  height: 50px;
  box-sizing: border-box;
  padding: 6px 10px;
  text-align: center;
  flex: row;
  .my-search-box {
    height: 36px;
    width: 100%;
    background-color: #fff;
    border-radius: 15px;
    line-height: 36px;

    .placehoder {
      padding-left: 5px;
    }
  }
}
</style>